<template>
  <header-bar></header-bar>
  <div class="gray-row">
    <div class="text">咒语</div>
  </div>
  <el-button class="upload-button" @click="uploadTemplate">上传模板</el-button>
  <div class="container">
    <el-card :body-style="{ padding: '0px' }" v-for="item in tag_list.list">
      <el-row type="flex" justify="center">
        <img :src=item.sample_image_url class="image" alt="" />
      </el-row>
      <div style="padding: 14px; max-width: 700px">
        <span class="name">{{ item.name }}</span>
        <div class="bottom">
          <div><span style="font-weight: bold;"> 正面Tags:</span> {{ item.tag }}</div>
          <div><span style="font-weight: bold;">负面Tags:</span> {{ item.negative_tag }}</div>
          <el-button type="primary" class="button" @click="copyText(item.tag + '>>>后面是负面词>>>' + item.negative_tag)">复制
          </el-button>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { onBeforeMount, reactive } from "vue";
import { get_abracadabra_list } from "@/api/abracadabra";
import { AbracadabraReturnInfo } from "@/types";
import { ElMessage } from "element-plus";
import HeaderBar from "@/components/HeaderBar.vue";

const copyText = async (text: string) => {
  ElMessage({
    message: '复制成功',
    type: 'success'
  });
  await navigator.clipboard.writeText(text)
}
const tag_list = reactive({
  list: new Array<AbracadabraReturnInfo>(),
});
onBeforeMount(() => {
  get_abracadabra_list().then((res) => {
    console.log(res.data.abracadabra_infos);
    tag_list.list = res.data.abracadabra_infos;
  });
});
const uploadTemplate = () => {

}
</script>

<style scoped lang="less">
.container {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
}

.gray-row {
  background-color: #f5f5f5;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;

  .text {
    font-weight: 700;
  }
}

.el-card {
  height: 100%;
}

.upload-button {
  margin: 10px;
}

.name {
  font-size: 25px;
  color: #303133;
  font-weight: bold;
}

.bottom {
  margin-top: 13px;
  line-height: 20px;
}

.button {
  bottom: 10px;
  float: right;
}

.image {
  width: 256px;
  display: block;
}
</style>
